<template>
	<view class="production-box">
		<view class="box-item">
		    <navBar title="消防用电安全 " goBackUrl="/pages/homePage/platform" @goBack="goBack"></navBar>
		    <view class="placeholderBox"></view>
		    <view class="containerItem">
				<u-tabs :list="tabList" @click="fnTabClick" :current='type' :scrollable='false' :lineWidth='200' :inactiveStyle="{fontSize:'36rpx'}" :activeStyle="{color:'#2F80ED',fontWeight: '800',fontSize:'36rpx'}"></u-tabs>
		    </view>
		    <scroll-view scroll-y="true" class="scroll-box" @scrolltolower="scrollBottom"
				:style="{height: scrollHeight}">
				<safety-form v-show="type == 0"  ref="formRef"></safety-form>
				<safety-record v-show="type == 1" ref="recordRef"
					:dataList="dataList" :total="total" @queryByField="queryByField" @fnClear="fnClear" @changeType="changeType"></safety-record>
		   </scroll-view>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import safetyForm from './components/safety_form.vue'
	import safetyRecord from './components/safety_record.vue'
	import { fireSafetyList } from "@/api/qualitySafetyManagement/qualitySafetyManagement.js"
	import mixins from '@/utils/mixins.js'
	export default {
		name: "production_index",
		mixins:['mixins'],
		components: {
			navBar,
			safetyForm,
			safetyRecord
		},
		data() {
			return {
				tabList:[
					{
						type:0,
						name:'发起填报'
					},
					{
						type:1,
						name:'填报记录'
					}
				],
				type:0,
				// 几个盒子的高度,计算scroll-view的高度
				boxHeight: {
					navBarH: 40,
					tabsH: 40,
					viewH: 20,
				},
				dataList:[],
				pageNum:1,//分页页数
				total:0,//总的条数
				totalPage:0,
				typeObj :{
					project_base_type_gcwb:'工程维保',
					project_base_type_zhdx:'综合大修',
					project_base_type_jd:'基地',
					project_base_type_mjs:'高端加固'
				}
			}
		},
		computed: {
			scrollHeight() {
				// #ifdef APP-PLUS  || H5 
					return `calc(100vh - 154rpx - ${this.boxHeight.navBarH + this.boxHeight.tabsH + this.boxHeight.viewH}px)`
				// #endif 
				// #ifdef MP-WEIXIN 
					return `calc(100vh - 50rpx - 154rpx - ${this.boxHeight.navBarH + this.boxHeight.tabsH + this.boxHeight.viewH}px)`
				// #endif 
			}
		},
		mounted() {
			// 计算scorll-view的高度 , 用100vh减去几个不滚动盒子的高度
			const query = uni.createSelectorQuery().in(this);
			query.select('.navBar').boundingClientRect(data => {
				this.boxHeight.navBarH = data?.height ?? 0
			}).exec();
			query.select('.containerItem').boundingClientRect(data => {
				this.boxHeight.tabsH = data?.height ?? 0
			}).exec();
			query.select('.placeholderBox').boundingClientRect(data => {
				this.boxHeight.viewH = data?.height ?? 0
			}).exec();
		},
		methods: {
			// 返回上一级
			goBack(url){
				uni.switchTab({
					url: url
				})
			},
			//点击tab事件
			fnTabClick(val) {
				this.type = val.type
				if(this.type === 1) {
					this.pageNum = 1
					this.dataList = []
					this.getTableData()
				}
			},
			getTableData(keyword = null, type = '全部') {
				let resq = {
					currPage:this.pageNum,
					pageSize:10,
					params:{
						keyword,
						projectBaseType:type === '全部' ? null : this.$store.getters.dictMap['project_base_type'].find(it => it.name === type).code
					}
				}
				fireSafetyList(resq).then(res => {
					uni.showLoading({
						title: '加载中',
						mask:true
					});
					if(!res.success) return
					if (res.result.list.length > 0) {
						res.result.list = res.result.list.map(it => ({
							...it,
							projectBaseType:this.typeObj[it.projectBaseType]
						}))
						//搜索条件有值
						if(keyword) {
							this.dataList = res.result.list
						}else {
							//否则拼接
							this.dataList = this.dataList.concat(res.result.list)
						}
					}else {
						this.dataList = res.result.list || []
					}
					// this.dataList = res.result.list || []
					this.total = res.result.total
					this.totalPage = res.result.totalPage
					if(this.pageNum >= this.totalPage) {
						this.pageNum = this.totalPage
					}
					uni.hideLoading()
				})
			},
			queryByField(val,type) {
				this.pageNum = 1
				this.dataList = []
				this.getTableData(val,type)
			},
			fnClear(val,type) {
				this.pageNum = 1
				this.dataList = []
				this.getTableData(val,type)
			},
			changeType(val,type) {
				this.pageNum = 1
				this.dataList = []
				this.getTableData(val,type)
			},
			scrollBottom() {
				if(this.type === 1) {
					console.log('父组件到底了~~~~~~');
					this.pageNum++;
					if(this.totalPage >= this.pageNum)
						this.getTableData(this.$refs.recordRef.searchText, this.$refs.recordRef.projectBaseType);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.production-box {
	/* #ifdef APP-PLUS  || H5 */
		// height: 100vh;
	/* #endif */
	/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
	/* #endif */
	// height: 100vh;
	background-color: #f5f7fb;
	.box-item {
		.placeholderBox {
			height: 30rpx;
		}
		.containerItem {
			padding-top: 20rpx;
			background-color: #fff;
		}
	}
}
</style>
